<template>
  <div class="sub-out ">
    <proTable class="table-05" @rowData="handleRowData" :loading="page.tableLoad" :columns="page.columns" :data="page.data" @clickPage="onClickPage" :current="pege_param.start_recd" :total="page.allTotal" :pageSize="pege_param.limit_recd">
    </proTable>
    <pro-dialog class="setdialog" ref="addqxgz" width="628" :nopadding="true" :title="`新增${modal_name}缺陷规则`">
      <div style="padding: 32px 50px 32px 40px">
        <YsForm ref="zhpjForm" :model="ruleInfo" :label-width="130" :rules="app_rule">
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem v-if="rule_type!=5" label="版本名称" prop="rule_name">
                <YsInput size="large" maxlength="100" v-model="ruleInfo.rule_name"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <template v-if="rule_type==5">
            <YsRow :gutter="16">
              <YsCol span="24">
                <YsFormItem label="名称" prop="rule_name">
                  <YsInput size="large" maxlength="100" v-model="ruleInfo.rule_name"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow>
            <!-- <YsRow :gutter="16">
              <YsCol span="24">
                <YsFormItem label="编码" prop="rule_name">
                  <YsInput size="large" maxlength="100" v-model="ruleInfo.rule_name"></YsInput>
                </YsFormItem>
              </YsCol>
            </YsRow> -->
          </template>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="设备类型" prop="current_parts">
                <Select class="select-border" size="large" multiple v-model="ruleInfo.current_parts">
                  <Option v-for="(item, index) in partInfos" :value="item.id" :key="index">{{ item.ep_name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="材质" prop="current_materials">
                <Select class="select-border" size="large" multiple v-model="ruleInfo.current_materials">
                  <Option v-for="(item, index) in materialInfos" :value="item.id" :key="index">{{ item.mat_name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16" >
            <YsCol span="24">
              <YsFormItem label="焊接方式" prop="current_beans">
                <Select class="select-border" size="large" multiple v-model="ruleInfo.current_beans">
                  <Option v-for="(item, index) in craftInfos" :value="item.id" :key="index">{{ item.cf_name }}</Option>
                </Select>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="文件号">
                <YsInput size="large" :maxlength="50" v-model="ruleInfo.rule_file_name"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
          <YsRow :gutter="16">
            <YsCol span="24">
              <YsFormItem label="备注">
                <YsInput size="large" type="textarea" maxlength="200" placeholder="最长可输入200字符" class="hg100" v-model="ruleInfo.remark"></YsInput>
              </YsFormItem>
            </YsCol>
          </YsRow>
        </YsForm>
        <YsRow class="foot-btn" style="margin-top: 10px">
          <YsButton @click="handleCancel()" size="large">关闭</YsButton>
          <YsButton @click="handleOk('zhpjForm')" size="large" type="primary">确定</YsButton>
        </YsRow>
      </div>
    </pro-dialog>
  </div>
</template>


<script>
import { mapActions, mapMutations } from "vuex";

export default {
  name: "TopTable",
  props: {
    rule_type: {
      type: String,
      default: () => null
    },
    //数据
    modal_name: {
      type: String,
      default: () => null
    },
    butFlag: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      inputFocus: false,
      partInfos: [],//设备集合
      materialInfos: [],//材质集合
      craftInfos: [],//焊接方式
      pege_param: {
        rule_type: this.rule_type, //规则类型：1-不允许缺陷，2-圆形缺陷，3-条形缺陷，4-综合评级，5-未焊透
        keyword: "", // 查询参数：名称、编码
        start_recd: 1, //开始数据
        limit_recd: 5, //查询的条数
      },
      flawTypeflag: true,
      pre_version: "CIR",
      ruleInfo: {
        rule_name: "",//规则名称
        rule_type: this.rule_type,
        rule_file_name: "",//规则文件名称
        remark: "",//备注
        rule_parts: [],//
        rule_materials: [],
        rule_craft_beans: [], //焊接方式集合
        current_parts: [],
        current_materials: [],
        current_beans: [],
      },
      page: {
        subscribeState: 0,
        tableLoad: false,
        allTotal: 0,
        columns: [
          {
            title: "顺序号",
            width: 80,
            tooltip: true,
            render: (h, params) => {
              return h(
                "span",
                params.index +
                (this.pege_param.start_recd - 1) *
                this.pege_param.limit_recd +
                1
              );
            },
          },
          {
            title: "状态",
            minWidth: 80,
            tooltip: true,
            key: "rule_state",
            render: (h, params) => {
              if (params.row.rule_state == '0') {
                return h('span', {}, '新建')
              }
              if (params.row.rule_state == '1') {
                return h('span', {}, '生效')
              }
              if (params.row.rule_state == '2') {
                return h('span', {}, '失效')
              }
            }
          },
          {
            title: "版本号",
            minWidth: 80,
            tooltip: true,
            key: "rule_version",
          },
          {
            title: "名称",
            tooltip: true,
            minWidth: 80,
            key: "rule_name",
          },
          {
            title: "编号",
            minWidth: 80,
            tooltip: true,
            key: "rule_code",
          },
          {
            title: "设备类型",
            minWidth: 110,
            tooltip: true,
            key: "rule_parts",
            render: (h, params) => {
              return h('div', params.row.rule_parts.map(function (item, index) {
                return h('span', {
                  class: item.ep_name ? "shebeistyle" : "",
                }, item.ep_name)
              }))
            }
          },
          {
            title: "材质",
            minWidth: 80,
            tooltip: true,
            key: "rule_materials",
            render: (h, params) => {
              return h('div', params.row.rule_materials.map(function (item, index) {
                return h('span', {
                  class: item.mat_name ? "shebeistyle" : "",
                }, item.mat_name)
              }))
            }
          },
          {
            title: "焊接方式",
            minWidth: 80,
            tooltip: true,
            render: (h, params) => {
              return h('div', params.row.rule_craft_beans.map(function (item, index) {
                return h('span', {
                  class: item.cf_name ? "shebeistyle" : "",
                }, item.cf_name)
              }))
            }
          },
          {
            title: "文件号",
            minWidth: 80,
            tooltip: true,
            key: "rule_file_name",
          },
          {
            title: "备注",
            minWidth: 80,
            key: "remark",
            tooltip: true,
          },
          {
            title: "操作",
            width: 160,
            tooltip: true,
            // align: "center",
            render: (h, params) => {
              return h(
                "div",
                {
                  attrs: { class: "mouse-on" },
                },
                [
                  h("span", {
                    domProps: {
                      innerText: params.row.rule_state == 1 ? "失效" : params.row.rule_state == 0 ? '生效' : '',
                    },
                    style: {
                      margin: params.row.rule_state == 1 ? "0 0 0 6px" : params.row.rule_state == 0 ? "0 0 0 6px" : '',
                    },
                    class: "textColor",
                    on: {
                      click: (event) => {

                        if (params.row.rule_state == 2 || params.row.rule_state == 0) {
                          this.handleEffect(params.row, 1)
                        }
                        if (params.row.rule_state == 1) {
                          this.handleEffect(params.row, 2)
                        }
                        event.stopPropagation();
                      },
                    },
                  }),
                  h("span", {
                    domProps: {
                      innerText: params.row.rule_state == 1 || params.row.rule_state == 2 ? "复制" : '',
                    },
                    style: {
                      margin: params.row.rule_state == 1 || params.row.rule_state == 2 ? "0 0 0 6px" : '',
                    },
                    class: "textColor",
                    on: {
                      click: (event) => {
                        this.handleCopyItem(params.row);
                        event.stopPropagation();
                      },
                    },
                  }),
                  h("span", {
                    domProps: {
                      innerText: params.row.rule_state == 0 ? "修改" : '',
                    },
                    style: {
                      margin: params.row.rule_state == 0 ? "0 0 0 6px" : '',
                    },
                    class: "textColor",
                    on: {
                      click: (event) => {
                        this.getSheBeiBuWei()
                        this.getCaiZhiWeiHu()
                        this.getHanJieGongYi()
                        this.exitTopTableItem(params.row);
                        event.stopPropagation();
                      },
                    },
                  }),
                  h("span", {
                    domProps: {
                      innerText: params.row.rule_state != 1 ? "删除" : '',
                    },
                    style: {
                      margin: params.row.rule_state != 1 ? "0 0 0 6px" : '',
                    },
                    class: "textColor2",
                    on: {
                      click: (event) => {
                        this.handleDlelteItem(params.row);
                        event.stopPropagation();
                      },
                    },
                  }),

                ]
              );
            },
          },
        ],
        data: [],
      },
      app_rule: {
        rule_name: [
          { required: true, message: this.rule_type == 5 ? "名称不能为空" : "版本名称不能为空", trigger: "blur" },
        ],
        current_parts: [
          { required: true, type: 'array', message: "设备类型不能为空", trigger: "blur" },
        ],
        current_materials: [
          { required: true, type: 'array', message: "材质不能为空", trigger: "blur" },
        ],
        current_beans: [
          { required: true, type: 'array', message: "焊接方式不能为空", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    ...mapActions(["getPageRateRule", "getPageEquMaterial", "getPageAllCraft", "getPageEquPart", "addRateRule", "editRateRule", "getZhwhRuleUse", "deleteRateRule", "setYuanTiaoruleCopy"]),
    ...mapMutations(["setTableRow"]),
    //获取服务列表
    getQueXianLeiXing(val = '') {
      let _this = this;
      this.page.tableLoad = true;
      this.pege_param.keyword = val
      _this.getPageRateRule(this.pege_param).then((res) => {
        let { data, msg, scode, status } = res;
        _this.page.tableLoad = false;
        if (status === "ok") {
          this.page.data = data.ruleBeans;
          this.page.allTotal = data.all_recd;
        } else {
          _this.$YsMessage.error(msg);
          this.page.data = [];
          this.page.allTotal = 0;
        }
      }).catch((err) => {
        _this.page.tableLoad = false;
        _this.$YsMessage.error("获取数据失败");
      });
    },
    //分页
    onClickPage(pageNum) {
      this.pege_param.start_recd = pageNum;
      this.getQueXianLeiXing();
    },
    //选中行
    handleRowData(item) {
      this.setTableRow(item)
    },
    //打开模态框
    openModal() {
      this.$refs.zhpjForm.resetFields()
      this.getSheBeiBuWei()
      this.getCaiZhiWeiHu()
      this.getHanJieGongYi()
      this.flawTypeflag = true
      this.ruleInfo = this.$options.data().ruleInfo
      this.$refs.addqxgz.show()
    },
    //打开生效弹出
    setopenModal() {
      this.$emit('handleModal', true)
    },
    //确定
    handleOk (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.flawTypeflag) {
            this.addLeveltItem()
          } else {
            this.exitLeveltItem()
          }
        }
      });
    },

    //获取参数
    getParam() {
      let partInfo_array = []
      let materialInfo_array = []//材质集合
      let beans_array = []
      this.ruleInfo.current_parts.map(v => { partInfo_array.push({ part_id: v }) })
      this.ruleInfo.current_materials.map(v => { materialInfo_array.push({ mat_id: v }) })
      this.ruleInfo.current_beans.map(v => { beans_array.push({ craft_id: v }) }) //焊接方式
      this.ruleInfo.rule_parts = partInfo_array
      this.ruleInfo.rule_materials = materialInfo_array
      this.ruleInfo.rule_craft_beans = beans_array
      this.ruleInfo.rule_type = this.rule_type
    },
    //综合评级新增
    async addLeveltItem() {
      let _this = this
      await _this.getParam()
      _this.addRateRule({ ruleInfo: this.ruleInfo, pre_version: this.pre_version }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          _this.$YsMessage.success(data.message_text)
          _this.$refs.addqxgz.close()
          _this.getQueXianLeiXing()
        } else {
          _this.$YsMessage.error(msg);
        }
      })
    },
    //综合评级编辑
    async exitLeveltItem() {
      let _this = this
      await _this.getParam()
      _this.editRateRule({ ruleInfo: this.ruleInfo }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          _this.$YsMessage.success(data.message_text)
          _this.$refs.addqxgz.close()
          _this.getQueXianLeiXing()
        } else {
          _this.$YsMessage.error(msg);
        }
      })
    },
    //取消
    handleCancel() {
      this.$refs.addqxgz.close()
    },
    //获取设备类型select
    getSheBeiBuWei() {
      let _this = this;
      _this.getPageEquPart({ limit_recd: 99999 }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.partInfos = data.partInfos

        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        _this.$YsMessage.error("获取数据失败");
      });
    },
    //获取材质select
    getCaiZhiWeiHu() {
      let _this = this;
      _this.getPageEquMaterial({ limit_recd: 99999 }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.materialInfos = data.materialInfos;
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        _this.$YsMessage.error("获取数据失败");
      });
    },
    //焊接方式
    getHanJieGongYi() {
      let _this = this;
      _this.getPageAllCraft({}).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.craftInfos = data.craftInfos;
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        _this.$YsMessage.error("获取数据失败");
      });
    },
    //生效失效
    handleEffect(item, state) {
      let _this = this
      let ruleInfo = {
        id: item.id,
        rule_state: state,
        rule_type: this.rule_type,
        rule_parts: item.rule_parts && item.rule_parts.map(v => { return { part_id: v.part_id } }),
        rule_materials: item.rule_materials && item.rule_materials.map(v => { return { mat_id: v.mat_id } }),
        rule_craft_beans: item.rule_craft_beans && item.rule_craft_beans.map(v => { return { craft_id: v.craft_id } })
      }
      _this.getZhwhRuleUse({ ruleInfo: ruleInfo, }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          _this.$YsMessage.success(data.message_text)
          _this.getQueXianLeiXing()
        } else {
          _this.$YsMessage.error(msg);
        }
      })
    },
    //修改
    exitTopTableItem(item) {
      this.$refs.zhpjForm.resetFields()
      this.flawTypeflag = false
      this.ruleInfo = {
        id: item.id,
        rule_type: this.rule_type,
        rule_name: item.rule_name,
        rule_version: item.rule_version,
        rule_file_name: item.rule_file_name,
        remark: item.remark,
        rule_parts: [],
        rule_materials: [],
        rule_craft_beans: [],
        current_parts: item.rule_parts ? item.rule_parts.map(v => v.part_id) : [],
        current_materials: item.rule_materials ? item.rule_materials.map(v => v.mat_id) : [], //备用属性
        current_beans: item.rule_craft_beans ? item.rule_craft_beans.map(v => v.craft_id) : [], //焊接方式集合
      }
      this.$refs.addqxgz.show()
    },
    //删除操作
    handleDlelteItem(item) {
      let _this = this;
      this.$YsModal.confirm({
        title: "删除",
        content: "<p>确认是否删除！</p>",
        onOk: () => {
          _this.deleteRateRule({ ruleInfo: { id: item.id } }).then((res) => {
            let { data, msg, scode, status } = res;
            if (status === "ok") {
              _this.$YsMessage.success("删除成功");
              _this.getQueXianLeiXing();
            } else {
              _this.$YsMessage.error(msg);
            }
          }).catch((err) => {
            _this.$YsMessage.error("删除失败");
          });
        },
      });
    },
    //拷贝
    handleCopyItem(item) {
      let _this = this

      _this.setYuanTiaoruleCopy({ ruleInfo: { id: item.id }, pre_version: this.pre_version }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          _this.$YsMessage.success(data.message_text)
          _this.getQueXianLeiXing()
        } else {
          _this.$YsMessage.error(msg);
        }
      })
    },
    //添加列
    changeTableColumns() {
      let flag = this.page.columns.some(({ title }) => title == '焊接方式');
      if (flag) return
      if (this.rule_type == '5') {
        let item = {
          title: "焊接方式",
          width: 110,
          tooltip: true,
          render: (h, params) => {
            return h('div', params.row.rule_craft_beans.map(function (item, index) {
              return h('span', {
                class: item.cf_name ? "shebeistyle" : "",
              }, item.cf_name)
            }))
          }
        }
        this.page.columns.splice(-3, 0, item)
      }
    },
    //获取焦点失去焦点
    clickBlur(flag) {
      this.inputFocus = flag
    }
  },
  mounted() {
    this.changeTableColumns();
    this.getQueXianLeiXing();
  },
};
</script>
<style lang="less" scoped>
/deep/ .textColor {
  // color: '#0091FF';
  color: #0091ff;
  cursor: pointer;
  &:hover {
    // color: #0091ff;
    opacity: 0.8;
  }
}
/deep/ .textColor2 {
  color: #0091ff;
  // color: '#0091FF';
  cursor: pointer;
  &:hover {
    // color: #d53939;
    opacity: 0.8;
  }
}
.sub-out {
  height: 100% !important;
  border-radius: 4px 4px 0 0;
}
/deep/ .hg100 {
  textarea {
    height: 100px;
  }
}
/deep/.shebeistyle {
  padding: 2px 10px;
  border-radius: 10px;
  color: #fff;
  background: rgba(0, 145, 255, 1);
}
.right-between {
  width: 80px;
  min-width: 80px;
  height: 40px;
  background: rgba(255, 255, 255, 0.39);
  border: 1px solid #0061ff;
  opacity: 1;
  border-radius: 4px;
  color: #0091ff;
  font-size: 16px;
  font-family: PingFang SC;
}
.searchBtn {
  width: 80px;
  min-width: 80px;
  height: 40px;
  font-family: PingFang SC;
}
</style>
